//function slide() {

//自运行的匿名函数
(function($) {
	//本函数每次调用，只负责一个轮播图的功能，也就是说只会产生一个轮播图，这个函数的作用域只能分配一个轮播图
	//所以要求在调用本函数的时候务必把当前轮播图的根标签传递过来。
	//这里的形参 ele 就是某个轮播图的根标签
	//因为要调用三次本函数，所以要定义一个函数变量，负责用slide()调用，
	var slide = function(ele,options) {

			//转化为jquery 标签对象,$ele代表每个传进来的ele元素
			var $ele = $(ele);
			
			//默认设置选项
			var setting={
				//控制刚炸开的时间
				delay:1000,
				//控制轮播速度
				speed:1000,
				
				
				
			}
			
			//合并到{}中。产生一个新对象
//			$.extend({},setting,options);
			//对象的合并//合并 setting 和 options 对象，并且修改 setting 对象。这是常用的插件开发模式。参数true是深度合并，防止对象嵌套对象的深层数据丢失
			
			$.extend(true,setting,options);
			

			// 规定好每张图片处于的位置和状态
			var states = [{
				ZIndex: 1,
				width: 120,
				height: 150,
				top: 69,
				left: 134,
				Zopacity: 0.2
			}, {
				ZIndex: 2,
				width: 130,
				height: 170,
				top: 59,
				left: 0,
				Zopacity: 0.5
			}, {
				ZIndex: 3,
				width: 170,
				height: 218,
				top: 35,
				left: 110,
				Zopacity: 0.7
			}, {
				ZIndex: 4,
				width: 224,
				height: 288,
				top: 0,
				left: 263,
				Zopacity: 1
			}, {
				ZIndex: 3,
				width: 170,
				height: 218,
				top: 35,
				left: 470,
				Zopacity: 0.7
			}, {
				ZIndex: 2,
				width: 130,
				height: 170,
				top: 59,
				left: 620,
				Zopacity: 0.5
			}, {
				ZIndex: 1,
				width: 120,
				height: 150,
				top: 69,
				left: 500,
				Zopacity: 0.2
			}, ];

			var lis = $ele.find('li');
			console.log(lis);
			//让每个li对应上面 states数组 的每个状态
			function move() {

				lis.each(function(index, ele) {
					//			move使用 slide 函数域里面的变量：states.lis等/
					var state = states[index];

					//$(this)
					$(ele).css('z-index', state.ZIndex).finish().animate(state, setting.delay).find('img').css('opacity', state.Zopacity);

				});

			}
			//让 li 从正中间展开
			move();

			//下一张
			function next() {
				//pop弹出数组最后一个，unshift加在数组最前面，
				states.unshift(states.pop());
				move();
			}
			//上一张
			function prev() {
				//shift弹出数组最前一个，push加在数组最后面，

				states.push(states.shift());
				move();
			}

			//点击下一张
			$ele.find('.zqs-next').click(function() {

				next();

			});
			//上一张
			$ele.find('.zqs-prev').click(function() {

				prev();

			});
			//自动轮播
			var interval = null;

			function autoPlay() {

				//定时器
				interval = setInterval(function() {

					next();

				}, setting.speed);

			}
			autoPlay();

			//停止轮播
			$ele.find('section').add(lis).hover(function() {
				clearInterval(interval);
			}, function() {
				autoPlay();
			});
		}
		//找到要轮播的轮播图的根标签，调用 slide 方法

	$.fn.zqsSlide = function(options) {
		$(this).each(function(i,ele) {
//			slide(this);
			slide(ele,options);

		});
	
		//支持链式调用
		return this;
	}
//这里是实参
})(jQuery);

/*
 
 * 用 jQuery 封装插件的几种写法：
 * 
 * 插件类写法：
 * $.fn.customFun = function(){
 * 	//自定义插件的代码	
 * 
 * }
 * 用法：
 * $('selector').customFun();
 * 
 * 工具类写法
 * $.customFun = function(){
 * 	
 * //自定义工具类代码
 * 
 * }
 * 用法：
 * $.customFun();
 * 
 * */









//}
//这里使用了slide函数，应该是函数作用域的，包括其里面的states。lis等变量，但是slide函数里的move函数使用了states。lis等变量，而且还是在定时器中反复使用，导致states。lis等变量没有被消除。就产生了闭包（僵尸变量，因为argments里面的变量都不能用了）
//slide();

//$(function() {
//	//自运行匿名函数
//});
//(function() {
//	//自运行匿名函数
//
//})()

/*
 
 * 变量的作用域问题
 * 1.全局域(window)   2.函数域名（function 域） 3.block 域
 * 全局域：从页面被打开之后到页面被关闭之前始终存在
 * 函数域：存在于函数调用的一瞬间（也不一定  考虑下闭包的存在）
 * 
 * 闭包的理解：
 * 闭包的作用：可以保留函数的作用域，(要不然闭包里面的函数  move 就不能使用 slide 函数域里面的变量：states.lis等)
 * 闭包产生的必要条件：（函数）方法里面套（函数）方法，（内层函数要使用外层函数作用域里面的变量）
 * 
 * 全局变量会产生闭包吗？
 * 不会！！！因为全局变量存在全局域里
 * 
 * 
 * */

//我们的轮播图能封装成插件吗?会有什么问题
//1.插件中最好不要用id,原因：插件是能够被重复使用的，也就是说在同一页面中可能多次使用，造成冲突
//2.变量的命名和方法的命名：states、interval、move（）、next() .用户在使用这个插件的时候，可能还会
//自己创建的js文件,也有这样的命名,那么久产生冲突了（自运行匿名函数）
//3.标签class 的值的问题：prev 、next 太大众化
//4.插件文件名命名的问题 index.js 命名太大众化